<template>
    <el-dialog title="人员信息" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" :before-close="handleClose">
        <div class="search">
            <div class="search_keyword">
                <el-input v-model="searchForm.keyword" clearable placeholder="请输入关键词"></el-input>
            </div>
            <div class="search_submit">
                <el-button type="primary" round @click="rePosts">搜索</el-button>
            </div>
            <div class="search_submit">
                <el-button type="warning" round @click="resertPosts">重置</el-button>
            </div>
        </div>
        <el-table style="width: 100%" max-height="550" :data="dataList" :loading="tableLoading">
            <el-table-column prop="username" label="姓名">
            </el-table-column>
            <el-table-column prop="roleName" label="角色">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="180">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'error'">
                        {{ scope.row.status == 1 ? '可用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180">
            </el-table-column>
            <el-table-column prop="lastLoginTime" label="最后登录时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="chooseRow(scope.$index, scope.row)" type="text" size="small">
                        选择
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="global-page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes"
                :page-size="pageSize" :current-page="pageNum" background layout="sizes, total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </el-dialog>
</template>

<script>
import API from "@/api/apiCompanyUser";
export default {
    name: "adminUser",
    props: {
        roleIds: String,
        isOpen: Boolean,
    },
    watch: {
        isOpen(val) {
            if (val) {
                this.dialogVisible = true
            } else {
                this.dialogVisible = false
            }
        },
        roleIds(val) {
            if (val) {
                this.searchForm.roleIds = val
                this.getPost()
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            tableLoading: false,
            pageNum: 1,
            pageSize: 10,
            dataList: [],
            total: 0,
            pageSizes: [10, 15, 20],
            searchForm: {
                keyword: '',
                roleIds: '',
            },
        };
    },
    methods: {
        chooseRow(index, row){
            this.$emit("getChooseUserId", row)
            this.dialogVisible = false
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
        },
        // 重置请求
        resertPosts(){
            this.searchForm.keyword = ''
            this.rePosts()
        },
        getPost() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            if (this.searchForm.keyword) {
                params.keyword = this.searchForm.keyword;
            }
            if (this.searchForm.roleIds) {
                params.roleId = this.searchForm.roleIds;
            }
            API.adminUserList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.total = res.count;
                    res.list.forEach(item => {
                        item.createTime = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
                        item.lastLoginTime = this.$moment(item.lastLoginTime).format("YYYY-MM-DD HH:mm:ss");
                    })
                    this.dataList = res.list;
                    this.tableLoading = false;
                }
            });
        },
        handleClose(){
            this.dialogVisible = false
            this.$emit("closeChooseUser")
        },
    }
};
</script>
<style lang="sass">
.el-range-separator
    width: 10% !important

</style>
<style scoped>
.search{
    display: flex;
    width: 90%;
}
.search_keyword{
    width: 15%;
}
.search_submit{
    padding-left: 20px;
}
</style>